<template>
  <div class="root">
    <m-header title="余额">
      <div slot="left" v-on:click="$router.go(-1)"><img class="m-icon-img margin-right-10" src="../../assets/images/menu_back.png" /></div>
      <div slot="right"><img class="m-icon-img margin-right-10" src="../../assets/images/menu_more.png" /></div>
    </m-header>

    <div class="content">

      <div class="wallet">
        <router-link to="/balancedetail">
          <div class="wallet-balance">
            <img src="../../assets/images/wallet_money.png" />
            <div class="wallet-balance-title"> 余额 </div>
            <div class="wallet-balance-data">￥{{wallet.balance}}</div>
          </div>
        </router-link>
      </div>

      <div class="buttonCon">
        <mu-raised-button label="充值" class="raised-button" backgroundColor="#fd4ba3" fullWidth @click="link2Recharge" />
        <mu-raised-button label="提现" class="raised-button" backgroundColor="#fd4ba3" fullWidth @click="link2BalanceWithDraw" />
      </div>
    </div>
  </div>
</template>

<script>
  import mHeader from '../../components/header'
  import {
    mapState
  } from 'vuex'
  export default {
    components: {
      mHeader
    },
    computed: mapState({
      wallet: (state) => state.myWallet
    }),
    methods: {
      link2Recharge() {
        this.$router.push('/balancerecharge');
      },
      link2BalanceWithDraw() {
        this.$router.push('/balancewithdraw');
      }

    }
  }

</script>

<style lang="less" scoped>
  /*@import "../../assets/less/common.less";*/

</style>
